import { connect, history } from 'umi';
import {
} from 'antd';
import React, { useState, useRef } from 'react';
import styles from './style.less';
import ProjectHeader from '@/pages/projects/components/ProjectHeader';
import ProjectDetail from '@/pages/projects/components/ProjectDetail';
import ProjectUser from '@/pages/projects/components/ProjectUser';
import ProjectDemand from '@/pages/projects/components/ProjectDemand'
import ProjectProduct from '@/pages/projects/components/ProjectProduct'
import ProjectDoc from '@/pages/projects/components/ProjectDoc'
import { useEffect } from 'react';
import ProjectDev from '../components/ProjectDev';
import ProjectQA from '../components/ProjectQA';
import ProjectTask from '../components/ProjectTask';
import ProjectBug from '../components/ProjectBug'
import { getProjectUserPermission } from '@/services/project/project'
import ProjectArticle from '../components/ProjectArticle';
import ProjectApi from '../components/ProjectApi';



const Detail = (props) => {
  const {
    match,
    location
  } = props;

  // console.log(match)
  const [tabKey, setTabKey] = useState(match.params.tab || "detail")
  const [projectId, setProjectId] = useState();
  const [permissionData,setPermissionData] = useState()

  const setPermissonData = (permissionList) => {
    let permissionData = [];
    for (let index in permissionList) {
      let permission = permissionList[index];
      if (permission.indexOf(".") > -1) {
        let permissions = permission.split(".");
        let subPer = permissions[1];
        permissionData[permissions[0]]  = {
          ...permissionData[permissions[0]],
          [subPer]:true,
        }
      } else {
        if (!permissionData[permission]) {
          permissionData[permission] = [];
        }
      }
    }
    console.log(permissionData)
    setPermissionData(permissionData)
  }

  useEffect(() => {
    if (match.params.projectId !== projectId) {
      setProjectId(match.params.projectId);
      getProjectUserPermission(match.params.projectId)
        .then((result) => {
          setPermissonData(result.data?.permission)
        })
    }
    if (match.params.tab !== tabKey) {
      setTabKey(match.params.tab);
    }
  }, [match])

  const onChangeTab = (newTabKey) => {
    console.log(tabKey,"->",newTabKey)
    history.push(`/projects/${projectId}/${newTabKey}`)
  }

  const renderTabContent = (tabKey) => {
    switch (tabKey) {
      case "detail":
        return <ProjectDetail {...props} projectPermission={permissionData} projectId={projectId} routeParam={match && match.params} />
      case "member":
        return <ProjectUser {...props} projectPermission={permissionData} projectId={projectId} />
      case "demand":
        return <ProjectDemand {...props} projectPermission={permissionData} projectId={projectId} routeParam={match && match.params} />
      case "dev":
        return <ProjectDev {...props} projectPermission={permissionData} projectId={projectId} routeParam={match && match.params} />
      case "prod":
        return <ProjectProduct {...props} projectPermission={permissionData} projectId={projectId} routeParam={match && match.params} />
      case "qa":
        return <ProjectQA {...props} projectPermission={permissionData} projectId={projectId} routeParam={match && match.params} />
      case "task":
        return <ProjectTask {...props} projectPermission={permissionData} projectId={projectId} routeParam={match && match.params}></ProjectTask>
      case "bug":
        return <ProjectBug {...props} projectPermission={permissionData} projectId={projectId} routeParam={match && match.params}></ProjectBug>
      case "article":
        return <ProjectArticle {...props} projectPermission={permissionData} projectId={projectId} routeParam={match && match.params}></ProjectArticle>
      case "wiki":
      case "knowledge":
        return <ProjectDoc {...props} projectPermission={permissionData} projectId={projectId} routeParam={match && match.params}></ProjectDoc>
      case "api": 
        return <ProjectApi {...props} projectPermission={permissionData} projectId={projectId} routeParam={match && match.params}></ProjectApi>
      default:
        return <ProjectDetail {...props} projectPermission={permissionData} projectId={projectId} />
    }
  }

  return <>
    <ProjectHeader
      projectId={projectId}
      activeTab={tabKey}
      onChangeTab={onChangeTab}
      permissionData={permissionData}
    >
    </ProjectHeader>
    <div className={styles.body}>
      {renderTabContent(tabKey)}
    </div>
  </>
}


export default connect(({ project }) => ({
}))(Detail); 